<template>
	<view class="page">

		<view class="card" >
			<view class="wq-item">
				<view class="wq-label">试压工姓名：</view>
				<input type="text" v-model="info.name" placeholder="请输入试压工姓名">
			</view>
			<view class="wq-item">
				<view class="wq-label">试压压力：</view>
				<input type="text" v-model="info.yali" placeholder="请输入试压压力">
			</view>
			<view class="wq-item">
				<view class="wq-label">试压时长(秒)：</view>
				<input type="text" v-model="info.shiyaLong" placeholder="请输入试压时长">
			</view>
			<u-datetime-picker ref="datetimePicker" :show="selectShow" v-model="info.timeAt" mode="datetime"
				@confirm="timeChange" @close="selectShow=false" :closeOnClickOverlay="true"></u-datetime-picker>
			<view class="wq-label">试压图片：</view>
			<view class="picUpload">
				<view class="picBar">
					<view class="picList">
						<view class="picItem" v-for="(it,idx) in info.shiyaPic" :key="idx">
							<view class="close" @tap="delImg(idx)">x</view>
							<image :src="cdnUrl+it" mode="aspectFill" class="pjImg"></image>
						</view>
						
					</view>
					<view class="picBtn" @tap="selectImg()">
						<image  src="/static/icon/xiangji.png" class="xjImg"></image>
						<text>上传图片({{info.shiyaPicLength}}/6)</text>
						
					</view>

				</view>
			</view>
			<view class="wq-label">试压视频：</view>
			<view class="picUpload">
				<view class="picBar">
					<view class="picList">
						<view class="picItem" v-for="(it,idx) in info.shiyaVideo" :key="idx">
							<view class="close" @tap="delVideo(idx)">x</view>
							<video :src="cdnUrl+it" class="pjImg"></video>
						</view>
					</view>
					<view class="picBtn" @tap="selectVideo()">
						<image src="/static/icon/xiangji.png" class="xjImg"></image>
						 <text>上传视频({{info.shiyaVideoLength}}/3)</text>
					</view>
			
				</view>
			</view>
			
		</view>
		<view class="action">

			<view class="wq-btn" style="background:#f30; margin-top:20upx;" @tap="save">保存</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api.js'
	import helper from '../../common/helper';
	export default {
		mixins: [helper],
		data() {
			return {
				id: 0,
				selectShow:false,
				info: {
					name: '',
					yali:'',
					time:'',
					shiyaLong:'',
					timeAt:'',
					shiyaPic:[],
					shiyaPicLength:0,
					shiyaVideoLength:0,
					shiyaVideo:[],
					jiPic:'',
					xiucishu:1,
					penqiPic:''
				}
			}
		},
		onLoad(e) {
			this.info.timeAt=this.timestampToDate(new Date());
			this.id = e.id;
		},
		onBackPress(options) {
			let pages = getCurrentPages() // 上一个页面实例对象   
			let beforePage = pages[pages.length - 2]
			beforePage.$vm.reloadCurrentList();
		},
		onUnload(){
			let pages = getCurrentPages() // 上一个页面实例对象
			let beforePage = pages[pages.length - 2]
			beforePage.$vm.reloadCurrentList();
		},
		methods: {
			delImg(idx) {
				this.info.shiyaPic.splice(idx, 1);
				this.info.shiyaPicLength = this.info.shiyaPic.length;
			},
			delVideo(idx){
				this.info.shiyaVideo.splice(idx,1);
				this.info.shiyaVideoLength=this.info.shiyaVideo.length;
			},
			timeChange(e){
				this.info.time=e.value;
				this.info.timeAt=this.timestampToDate(e.value);
				
				this.selectShow=false;
			},
			save() {
				var flag = true;
				
					if (this.info.name == "" || this.info.yali == "" || this.info.shiyaLong == "" || this.info.shiyaVideoLength== 0 || this.info.shiyaPicLength=="") {
						uni.showToast({
							title: "所有内容必填"
						})
						flag = false;
					}
				
				if (flag == true) {
					var data = {
						id: this.id,
						info: JSON.stringify(this.info),
						status: 3
					};
					api.doRequest('post', 'valve/shiya', data).then(res => {
						if (res.statusCode == 200 && res.data.code==200) {
							uni.showToast({
								title: "操作成功",
								icon: "none"
							})
							var that = this;
							setTimeout(function() {
								uni.navigateBack();
							}, 500);
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
						}

					})
				}


			},
			selectVideo(){
				var count=3-this.info.shiyaVideo.length;
				if(count==0){
					uni.showToast({
						title:"不能上传更多的视频"
					})
				}else{
					var that=this;
					uni.chooseVideo({
						count:1,
						success:(res)=>{
							//console.log(res);
							
							let baseUrl = 'https://up-z2.qiniup.com/';
							// uni.showLoading({
							// 	title: '上传中'
							// })
							var tempFilePath=res.tempFilePath;
							
							
								let key = 'sjfkdgfhjkhjksdjkjhkfdsq' + Date.now();
								let param = {
									file_name: key,
									type: 1
								};
								var token = '';
								api.doRequest('post', 'upload/upload_token', param).then(res => {
									if (res.statusCode == 200) {
										console.log(res.data.data.token);
										token = res.data.data.token;
										uni.showLoading();
										uni.uploadFile({
											url: baseUrl, //仅为示例，非真实的接口地址
											filePath: tempFilePath, //请求图片数组
											name: 'file',
											fileType: "video",
											formData: {
												'key': key,
												'token': token,
											}, //请求参数
											success: (uploadFileRes) => {
												var ret=JSON.parse(
													uploadFileRes.data);
												that.info.shiyaVideo.push(ret.key);
												that.info.shiyaVideoLength=that.info.shiyaVideo.length;
												setTimeout(function(){
													uni.hideLoading();
												},2000);
											}
										})
									}
								})
							
							
							
							
						}
					})
				}
			},
			selectImg(index) {
				var count=6-this.info.shiyaPic.length;
				if(count==0){
					uni.showToast({
						title:"不能上传更多的图片"
					})
				}else{
					var that = this;
					uni.chooseImage({
						count: 1,
						success: (res) => {
							//console.log(res);
					
							let baseUrl = 'https://up-z2.qiniup.com/';
							// uni.showLoading({
							// 	title: '上传中'
							// })
					
							res.tempFilePaths.forEach((item, idx) => {
								let key = 'sjfkdgfhjkhjksdjkjhkfdsq' + Date.now();
								let param = {
									file_name: key,
									type: 1
								};
								var token = '';
								api.doRequest('post', 'upload/upload_token', param).then(res => {
									if (res.statusCode == 200) {
										console.log(res.data.data.token);
										token = res.data.data.token;
										uni.uploadFile({
											url: baseUrl, //仅为示例，非真实的接口地址
											filePath: item, //请求图片数组
											name: 'file',
											fileType: "image",
											formData: {
												'key': key,
												'token': token,
											}, //请求参数
											success: (uploadFileRes) => {
												var ret = JSON.parse(
													uploadFileRes.data);
												
												that.info.shiyaPic.push(ret.key);
												that.info.shiyaPicLength=that.info.shiyaPic.length;
											}
										})
									}
								})
							});
					
					
					
						}
					})
				}
				
			},
			selectPqImg(index) {
				
				var that = this;
				uni.chooseImage({
					count: 1,
					success: (res) => {
						//console.log(res);
			
						let baseUrl = 'https://up-z2.qiniup.com/';
						// uni.showLoading({
						// 	title: '上传中'
						// })
			
						res.tempFilePaths.forEach((item, idx) => {
							let key = 'sjfkdgfhjkhjksdjkjhkfdsq' + Date.now();
							let param = {
								file_name: key,
								type: 1
							};
							var token = '';
							api.doRequest('post', 'upload/upload_token', param).then(res => {
								if (res.statusCode == 200) {
									console.log(res.data.data.token);
									token = res.data.data.token;
									uni.uploadFile({
										url: baseUrl, //仅为示例，非真实的接口地址
										filePath: item, //请求图片数组
										name: 'file',
										fileType: "image",
										formData: {
											'key': key,
											'token': token,
										}, //请求参数
										success: (uploadFileRes) => {
											var ret = JSON.parse(
												uploadFileRes.data);
											that.info.penqiPic=ret.key;
											
										}
									})
								}
							})
						});
			
			
			
					}
				})
			},
			selectJiImg(index) {
				
				var that = this;
				uni.chooseImage({
					count: 1,
					success: (res) => {
						//console.log(res);
			
						let baseUrl = 'https://up-z2.qiniup.com/';
						// uni.showLoading({
						// 	title: '上传中'
						// })
			
						res.tempFilePaths.forEach((item, idx) => {
							let key = 'sjfkdgfhjkhjksdjkjhkfdsq' + Date.now();
							let param = {
								file_name: key,
								type: 1
							};
							var token = '';
							api.doRequest('post', 'upload/upload_token', param).then(res => {
								if (res.statusCode == 200) {
									console.log(res.data.data.token);
									token = res.data.data.token;
									uni.uploadFile({
										url: baseUrl, //仅为示例，非真实的接口地址
										filePath: item, //请求图片数组
										name: 'file',
										fileType: "image",
										formData: {
											'key': key,
											'token': token,
										}, //请求参数
										success: (uploadFileRes) => {
											var ret = JSON.parse(
												uploadFileRes.data);
											that.info.jiPic=ret.key;
											
										}
									})
								}
							})
						});
			
			
			
					}
				})
			},
		}
	}
</script>

<style scoped>
	.page {
		background: #eee;
		border-top:1upx solid #eee;
	}

	.card {
		width: 670upx;
		padding: 20upx;
		margin: 20upx auto;
		background: #fff;
		border-radius: 20upx;
		border: 1upx solid #ccc;
	}
	.wq-item{
		padding:10upx 0;
	}
	.wq-item .wq-label{
		margin-bottom:10upx;
	}
	.wq-item .time{
		width:100%;
		border:1px solid #ccc;
		height:80upx;
		border-radius:10upx;
		display: flex;
		align-items: center;
		text-indent:1em;
		color:#999;
	}
	.picBar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 20upx 0;
	}

	.picList {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.picBtn text {
		color: #999;
		font-size: 0.8em;
		text-align: center;
		width: 100%;
		display: block;
	}

	.picItem {
		width: 200upx;
		height: 200upx;
		margin-right: 20upx;
		border: 1upx dashed #eee;
		position: relative
	}

	.picItem .close {
		width: 30upx;
		height: 30upx;
		position: absolute;
		z-index: 2;
		right: -10upx;
		top: -10upx;
		background: rgba(0, 0, 0, 0.8);
		color: #fff;
		text-align: center;
		line-height: 30upx;
		font-size: 0.7em;
		border-radius: 10upx;
	}

	.picItem .pjImg {
		width: 200upx;
		height: 200upx;
	}

	.xjImg {
		width: 150upx;
		height: 150upx;
		display: block;
		margin: 0 auto;
	}

	input {
		width: 670upx;
		border: 1px solid #ccc;
		height: 80upx;
		border-radius: 10upx;
		text-indent: 1em;
	}

	.action {
		width: 710upx;
		padding: 20upx;
	}
</style>